<!--
 * @Author: your name
 * @Date: 2021-11-19 22:24:58
 * @LastEditTime: 2021-11-20 17:48:34
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swlinks\swjc\index.vue
-->
<template>
  <div class="swjc">
    <div class="treelists">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <img src="../../../../assets/images/init/编组 17.png" alt="" />
            水务资源
          </template>
          <div class="links">
            <a-radio-group v-model="value" @change="onChange">
              <a-radio
                v-for="(item, index) in radios"
                :key="index"
                :style="{ color: value === item.path ? '#fff' : '#ffffff80' }"
                :value="item.path"
              >
                {{ item.name }}
              </a-radio>
            </a-radio-group>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInRight faster"
      leave-active-class="animated fadeOut faster"

    >
      <router-view />
    </transition>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      value: "",
      radios: [
        {
          name: "水库",
          path: "/home/swyzt/swjc/reservoir",
          // value: 1,
        },
        {
          name: "河道",
          path: "/home/swyzt/swjc/rivercourse",
          // value: 2,
        },
        {
          name: "内涝",
          path: "/home/swyzt/swjc/Waterlogging",
          // value: 3,
        },
        {
          name: "山洪",
          path: "/home/swyzt/swjc/Mountaintorrent",
          // value: 4,
        },
        {
          name: "大坝",
          path: "/home/swyzt/swjc/dam",
          // value: 5,
        },
        {
          name: "潮位",
          path: "/home/swyzt/swjc/Tidelevel",
          // value: 6,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleChange(val) {
      console.log(val);
    },
    onChange(e) {
      console.log("%c radio checked", "color:blue", e.target.value);
      this.$router.push(e.target.value);
    },
  },
  created() {},
  mounted() {
    console.log(this.$route);
    this.value = this.$route.path;
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.treelists {
  width: 208px;

  position: absolute;
  bottom: 10px;
  left: 32px;
  .links {
    background: linear-gradient(
        180deg,
        rgba(0, 50, 105, 0.432802) 0%,
        rgba(4, 17, 32, 0.5) 100%
      ),
      rgba(0, 5, 10, 0.334353);
    backdrop-filter: blur(16.3097px);
    color: rgb(255, 255, 255);
  }
  /deep/ .el-collapse {
    border: none;
  }
  /deep/.el-collapse-item__header {
    color: #89cbff;
    img {
      width: 11px;
      margin: 0 10px 0 23px;
    }
    background: linear-gradient(
        180deg,
        rgba(0, 50, 105, 0.432802) 0%,
        rgba(4, 17, 32, 0.5) 100%
      ),
      rgba(0, 5, 10, 0.334353);
    backdrop-filter: blur(16.3097px);
  }
  /deep/ .el-collapse-item__wrap {
    background: rgba(0, 0, 0, 0);
    border: none;
  }
  /deep/ .el-collapse-item__header {
    border: none;
    border-bottom: 1px solid #ffffff80;
  }
  /deep/ .el-icon-arrow-right::before {
    content: "▶";
    color: #fff;
  }
  .ant-radio-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    height: 30px;
    color: #fff;
    // lineheight: 30px;
  }
  .ant-radio-group {
    width: 100%;
  }
}
</style>
